<template>
    <view class="nav-bar-nav-bar">
        <scroll-view scroll-x="true" class="nav-bar-scroll-view" show-scrollbar="false">
            <view class="nav-bar-nav-item"  :style="{ padding: '0 ' + text_padding + 'rpx' }" v-for="(item, index) in navItems" :key="index" @tap="selectItem(index)">
                <text :class="['nav-bar-nav-text', { 'nav-bar-active': currentIndex === index }]"
                    :style="{ fontSize: fontSize + 'rpx' }">{{ item }}</text>
                <view :class="['nav-bar-indicator', { 'nav-bar-active': currentIndex === index }]" :style="{
                    width: currentIndex === index ? indicatorWidth + 'rpx' : '0', height: dynamicHeight + 'rpx'
                }">
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    name: 'NavBar',
    props: {
        text_padding: {  //字之间的间距
            type: [Number, String],
            default: 20
        },
        dynamicHeight: {  //active下滑高度
            type: [Number, String],
            default: 6
        },
        indicatorWidth: {  //active下滑宽度
            type: [Number, String],
            default: 40
        },
        fontSize: { //字体大小
            type: [Number, String],
            default: '28'
        },
        navItems: {
            type: Array,
            default: () => ['首页',]
        },
        defaultIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            currentIndex: this.defaultIndex
        }
    },
    methods: {
        selectItem(index) {
            this.currentIndex = index
            this.$emit('item-selected', index)
        }
    }
}
</script>

<style scoped>
.nav-bar-nav-bar {
    background-color: #ffffff;
    padding: 10rpx 0;
}

.nav-bar-scroll-view {
    white-space: nowrap;
}

.nav-bar-nav-item {
    display: inline-block;
    
    position: relative;
    text-align: center;
}

.nav-bar-nav-text {
    color: #333333;
    font-weight: bold;
    line-height: 60rpx;
}

.nav-bar-active {
    color: #68B95A;
    font-weight: bold;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
}

.nav-bar-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;

    background-color: #68B95A;
    transition: width 0.3s;
}
</style>
